import { Text, View, StyleSheet, SafeAreaView, ScrollView, Image, TouchableOpacity,TouchableHighlight } from 'react-native'
import React, { Component } from 'react'
// import ScrollViewCommands from 'react-native/Libraries/Components/ScrollView/ScrollViewCommands'
// import Ionicons from "@react-native-vector-icons/Ionicons"

export default class Personal extends Component {
    constructor(){
        super()
        this.state={
            islogined:false,
            picnum:4
        }
      }
    clickBtn=()=> {
        alert("退出");
    }
    render() {
        return (
            <SafeAreaView style={[styles.container]}>
                <ScrollView>
                    {/* <View style={[styles.avatar]}>
                        <Image source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
                            style={{ width: 80, height: 80, marginVertical: 10, borderRadius: 40 }}
                        />
                    </View> */}
                
                    <TouchableOpacity onPress={this.clickBtn}>
                    <View style={[styles.avatar]}>
                        <Image source={require('./p4.png') }
                            style={{ width: 80, height: 80, marginVertical: 10 }}
                        />
                    </View>
                    </TouchableOpacity>
                    {
                        this.state.islogined
                        ?
                        <View >
                        {/* <View style={{flexDirection:'row'}}> */}
                            <Text style={[styles.pes_T]}>
                                Number:123456
                            </Text>
                            <Text style={[styles.pes_T]}>
                            Number of gold COINS:123456
                            </Text>
                        {/* </View> */}
                        </View>
                        :
                        <View>
                            <TouchableOpacity onPress={() => {this.props.navigation.navigate("Login")}}>
                            <View style={[styles.listItem]}>
                            <View style={{flexDirection:'row'}}>
                                <Image source={require('./gantan.png') }style={{ width: 20, height: 20 }}
                            />
                                <Text style={{marginLeft: 10,fontSize:15}}>
                                    login
                                </Text>
                            </View>
                            <Image source={require('./dayu.png') }style={{ width: 20, height: 20 }}
                            />
                            </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => {this.props.navigation.navigate("Records")}}>
                                <View style={[styles.listItem]}>
                                <View style={{flexDirection:'row'}}>
                                    <Image source={require('./gantan.png') }style={{ width: 20, height: 20 }}
                                />
                                    <Text style={{marginLeft: 10,fontSize:15}}>
                                        Planted records
                                    </Text>
                                </View>
                                <Image source={require('./dayu.png') }style={{ width: 20, height: 20 }}
                                />
                                </View>
                            </TouchableOpacity>

                            <View  style={ {flex:1,justifyContent: 'center',alignItems: 'center'}}>
                            <TouchableHighlight
                                    style={styles.textCenter}
                                    underlayColor='gray'
                                    // onPress={() => this.onLogin(this.state.username, this.state.password)}
                                    onPress={this.clickBtn}
                                    >
                                <Text style={styles.button} >退出登录</Text>
                            </TouchableHighlight></View>
                        </View>
                      }
                </ScrollView>
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center'
    },
    avatar: {
        flexDirection: 'row',
        justifyContent: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#ddd'
    },
    listItem: {
        flexDirection: 'row',
        justifyContent:'space-between',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
        height:50,
        paddingHroizontal:20
    },
    button: {
        color: 'black',
        fontSize: 20,
      },
      textCenter: {
        height: 50,
        marginTop: 369,
        backgroundColor: 'tomato',
        flex:1,
        justifyContent: 'center',
        alignItems: 'center',
        width:200,
      },
      pes:{
      },
      pes_T:{
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
        justifyContent: 'center',
        fontSize:15,
        marginTop:10,
        marginBottom:5
      }
})